import Vue from "vue";
import css from '../style/showMessage.module.less'

/**
 *
 *弹出消息
 * @param {string} content 消息内容
 * @param {string} type    消息类型 error错误消息，info普通消息，success成功消息，warn警告消息 
 * @param {number} duraction 多久消失，0为不消失
 * @param {HTMLElement} container 容器，消息会显示容器正中，如果不传则显示页面正中
 */
//得到组件内DOm元素标签
function getComponentRootDom(comp, props) {
    const vm = new Vue({
        render: (h) => {
            return h(comp, { props })
        }
    })
    vm.$mount();
    return vm.$el;
}
import Icon from '@/components/Icon'
export default function(content, type = 'info', duraction = 1000, container, callback) {
    //获取字体图片dom元素
    const iconDom = getComponentRootDom(Icon, { type: `icon-${type}` });
    //创建消息元素
    const div = document.createElement('div');
    div.className = `${css.demo} ${css[type]}`;
    div.innerHTML = `<div  class=${css.icon}>${iconDom.outerHTML}</div><div>${content}</div>`;
    if (!container) {
        container = document.body;
    } else {
        if (getComputedStyle(container).position === 'static') {
            container.style.position = 'relative';
        }
    }
    container.appendChild(div);
    // 浏览器强行渲染
    div.clientHeight; // 导致reflow

    // 回归到正常位置
    div.style.opacity = 1;
    div.style.transform = `translate(-50%, -50%)`;

    //多久消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%, -50%) translateY(-25px)`;
        div.style.transition = `${0.5}s`;
        callback();
        // location.href = 'https://www.baidu.com/';
    }, duraction);

}